<template>
  <view class="list-box">
    {{$store.state.btnLogin}}
    <!-- 一大类列表 -->
    <view class="list" v-for="(item,index) in list" :key="index">
      <block v-for="(nav,i) in item" :key="i">
        <block v-if="nav.Status != true   ">
          <view class="list-item space-between center" @click="clickHandler(nav)" :hover-class="nav.checked || nav.checked === false  ? '' : 'active' " :hover-start-time="50">
            <view class="left center">
              <text v-if="nav.icon" :class="nav.icon"></text>
              <text>{{nav.title}}</text>
            </view>

            <view class="right center">
              <text v-if="nav.text"> {{nav.text}}</text>
              <!-- @click.stop="()=>{}"  stop 阻止调用父组件得click 事件触发  直接走 change事件-->
              <switch @click.stop="()=>{}" @change="clickHandler(nav)" v-if="nav.checked || nav.checked  === false " :checked="nav.checked" color="#345DC2" />
              <image v-if="nav.src" :src="nav.src" mode=""></image>
              <!-- {{nav}} -->
              <text v-if=" nav.numberStatus ">{{count}}次数</text>
              <text v-if="nav.rightIcon" :class="nav.rightIcon"></text>
            </view>
          </view>
        </block>
      </block>

    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: Array,
  },

  data () {
    return {
      url: '',
      count: 5,   //下载数量
    }
  },
  methods: {
    clickHandler (obj) {
      if (obj.page) {
        if (obj.page.indexOf('https') != -1) {
          this.count--
          if (this.count === -1) {
            this.count = 0
            obj.Status = true
            return
          }
          this.navTo('/pages/my/link?url=' + obj.page)
        }

        //点级后跳转到目标页面 并且会判断是否要求登录 ，没有登录进入登录页
        this.navTo(obj.page, { login: obj.login })
        return

      }
      if (obj.event) {
        //触发绑定事件  触发了父组件得事件方法
        this.$emit(obj.event, obj)
      }
    }
  }
}
</script>

<style lang="scss">
.list-box {
  background-color: $xg-color-grey;
  padding-top: 20rpx;
  .list {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    .list-item {
      padding: 26rpx 39rpx;
      border-bottom: $xg-underline;
    }
    .left {
      font-size: 33rpx;
      text:first-child {
        margin-right: 20rpx;
      }
    }
    .right {
      text {
        font-size: 35rpx;
        color: $xg-text-color-grey;
        margin-left: 15rpx;
      }
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
      }
      switch {
        margin-right: -10rpx;
      }
    }
  }
  .active {
    background-color: #fafafa;
  }
}

image {
  height: 80rpx;
  width: 80rpx;
}
</style>
